Web development and Tech news Blog site. WEBISFREE.com
[CSS] Exploring the place-content style property
Last Modified : 22 Aug, 2023 / Created : 22 Aug, 2023We're going to take a look at the place-content, one of the shortcut style properties in CSS that can be used in abbreviation.
The place-content property is a shorthand style property that allows the use of the following two properties simultaneously:
These two properties are commonly used to align layouts vertically and horizontally with parent or neighboring elements in flexbox. The advantage of using place-content is that you can apply the styles of the above two properties at once without declaring them separately. The usage syntax is briefly as follows:
place-content: <align-content> <justify-content>;
Now, let's find out how it can be used with a simple example.
Below is a look at several rectangular elements aligned inside the container class using flex.
Below are the default styles applied. A flex layout was used. For reference, the flex-wrap property was added to use align-content.
Now, let's apply the styles below and see how they appear.
Example 1) An example using align-content and justify-content:
With the above style applied, it will appear as follows.
This time, instead of align-content and justify-content, we have the look using place-content. The same values were used, so it's expected to appear the same as above.
Upon executing the above code, it will appear as follows.
Comparing the two examples above, it was confirmed that the results were as expected. In this way, using place-content allows you to use the two style properties at once in layouts using flex or grid.
That's a brief look at the place-content, a CSS shorthand style property.
# CSS place-content style property
The place-content property is a shorthand style property that allows the use of the following two properties simultaneously:
// align-content
// justify-content
These two properties are commonly used to align layouts vertically and horizontally with parent or neighboring elements in flexbox. The advantage of using place-content is that you can apply the styles of the above two properties at once without declaring them separately. The usage syntax is briefly as follows:
place-content: <align-content> <justify-content>;
Now, let's find out how it can be used with a simple example.
! Viewing css place-content example
Below is a look at several rectangular elements aligned inside the container class using flex.
<div class="test">
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>
Below are the default styles applied. A flex layout was used. For reference, the flex-wrap property was added to use align-content.
.container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
}
.item {
width: 50px;
height: 50px;
background: #999;
}
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
}
.item {
width: 50px;
height: 50px;
background: #999;
}
Now, let's apply the styles below and see how they appear.
Example 1) An example using align-content and justify-content:
align-content: center;
justify-content: center;
justify-content: center;
With the above style applied, it will appear as follows.
<div class="test">
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>
<style>
.test .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.test .item {
width: 50px;
height: 50px;
background: #999;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>
<style>
.test .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.test .item {
width: 50px;
height: 50px;
background: #999;
}
</style>
This time, instead of align-content and justify-content, we have the look using place-content. The same values were used, so it's expected to appear the same as above.
place-content: center center;
Upon executing the above code, it will appear as follows.
<div class="test2">
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>
<style>
.test2 .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
place-content: center center;
}
.test2 .item {
width: 50px;
height: 50px;
background: #999;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>
<style>
.test2 .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
place-content: center center;
}
.test2 .item {
width: 50px;
height: 50px;
background: #999;
}
</style>
Comparing the two examples above, it was confirmed that the results were as expected. In this way, using place-content allows you to use the two style properties at once in layouts using flex or grid.
That's a brief look at the place-content, a CSS shorthand style property.
Perhaps you're looking for the following text as well?
